<template>
  <div id="index">
    <div class="newsadd">
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">群总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.group_total_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">今日新增群</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.group_today_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">昨日新增群</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.group_yesterday_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">用户总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.customer_total_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">今日新增用户</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.customer_today_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">昨日新增用户</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.customer_yesterday_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">商品总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.goods_count)" />
        </div>
      </div>
    </div>
    <div class="newsadd">
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">订单总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.order_total_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">今日红包总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.red_today_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">今日红包金额</div>
          <countTo class="number" :start-val="startVal" :decimals="2" :end-val="Number(topData.red_today_money)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">昨日红包总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.red_yesterday_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">昨日红包金额</div>
          <countTo class="number" :start-val="startVal" :decimals="2" :end-val="Number(topData.red_yesterday_money)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">红包总数</div>
          <countTo class="number" :start-val="startVal" :end-val="Number(topData.red_today_count)" />
        </div>
      </div>
      <div class="box">
        <el-image class="icon" :src="require('@/assets/icon/zs.png')" fit="contain" />
        <div class="textinfo">
          <div class="text">红包总额</div>
          <countTo class="number" :start-val="startVal" :decimals="2" :end-val="Number(topData.red_today_money)" />
        </div>
      </div>
    </div>

    <div class="echartsbox">
      <div class="titlebox">
        <div class="text">
          经营状况
          <span>数据更新于{{ year }}-{{ month }}-{{ day }}，每日更新一次</span>
        </div>
        <div class="timebox">
          <div class="changebox">
            <div :class="{ active: type == 'day' }" @click="changetype('day')">日</div>
            <div :class="{ active: type == 'month' }" @click="changetype('month')">月</div>
          </div>

          <el-date-picker
            v-show="type == 'day'"
            v-model="picktime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="changeTime"
          />

          <el-date-picker
            v-show="type == 'month'"
            v-model="picktime"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM"
            :picker-options="pickerOptions"
            @change="changeTime"
          />

        </div>
      </div>

      <div class="listbox">
        <div v-for="(item, index) in list" :key="index" class="list" :class="{ 'active': filed == item.type }" @click="changeEcharts(item.type)">
          <div class="title">{{ item.title }}</div>
          <countTo class="number" :start-val="startVal" :decimals="item.decimals" :end-val="item.number" :duration="3000" />
        </div>
      </div>
      <div id="echarts1" class="echarts" />
    </div>

  </div>
</template>

<script>
import echarts from 'echarts'
import { eltips } from '@/utils/index'
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  data() {
    return {
      type: 'day',
      list: [
        { title: '成交总额(元)', number: 0, type: 'order_money', decimals: 2 },
        { title: '订单数(笔)', number: 0, type: 'order_count', decimals: 0 },
        { title: '用户数', number: 0, type: 'user_count', decimals: 0 },
        { title: '红包数量', number: 0, type: 'red_count', decimals: 0 },
        { title: '红包金额', number: 0, type: 'red_money', decimals: 2 }
      ],
      filed: 'order_money',
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate(),
      picktime: '',
      topData: {
        customer_today_count: 0,
        customer_total_count: 0,
        customer_yesterday_count: 0,
        goods_count: 2,
        group_today_count: 0,
        group_total_count: 0,
        group_yesterday_count: 0,
        order_total_count: 0,
        red_today_count: 0,
        red_today_money: 0,
        red_total_count: 0,
        red_total_money: 0,
        red_yesterday_count: 0,
        red_yesterday_money: 0
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },

      // 初始值
      startVal: 0
    }
  },
  created() {
    this.getTopCount()
    this.getCount()
  },
  mounted() {
    this.setcharts()
  },
  methods: {
    setEchartLine(option) {
      const echar = echarts.init(document.getElementById(option.el_id))
      echar.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '4%',
          right: '3%',
          bottom: '5%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true
          },
          data: option.x_data
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#e9edef'],
              width: 1,
              type: 'solid'
            }
          }
        },

        series: [{
          name: '',
          type: 'line',
          smooth: true,
          stack: '数量',
          data: option.y_data,
          symbolSize: 10,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: option.lineColor1 || 'rgba(135,154,255,1)' // 0% 处的颜色
              }, {
                offset: 0.5, color: option.lineColor2 || 'rgba(135,154,255,.5)' // 50% 处的颜色
              }, {
                offset: 1, color: option.lineColor3 || 'rgba(135,154,255,.2)' // 100% 处的颜色
              }])
            }
          },
          itemStyle: {
            normal: {
              color: option.color || '#4a67ff', // 改变折线点的颜色
              lineStyle: {
                color: option.color || '#4a67ff' // 改变折线颜色
              }
            }
          }
        }]
      })

      setTimeout(() => {
        window.onresize = function() {
          echar.resize()
        }
      }, 200)
    },
    changeTime(e) {
      this.setcharts()
      this.getCount()
    },
    changetype(type) {
      if (this.type != type) {
        this.type = type
        this.setcharts()
        this.getCount()
      }
    },
    changeEcharts(filed) {
      if (this.filed != filed) {
        this.filed = filed
        this.setcharts()
        this.getCount()
      }
    },
    // 折线图
    setcharts() {
      const data = {
        type: this.type,
        filed: this.filed
      }
      if (this.picktime && this.picktime.length == 2) {
        data.start_time = this.picktime[0]
        data.end_time = this.picktime[1]
      }
      this.$request.get('/admin/business/chart', { params: data }).then(res => {
        if (res.code == 200) {
          const x_data = []
          const y_data = []
          res.data.forEach(item => {
            x_data.push(item.time)
            y_data.push(item.count)
          })
          this.setEchartLine({
            el_id: 'echarts1',
            y_data: y_data,
            x_data: x_data
          })
        } else {
          eltips(res.msg, 'error')
        }
      })
    },
    // 折线数量
    getCount() {
      const data = {}
      if (this.picktime && this.picktime.length == 2) {
        data.start_time = this.picktime[0]
        data.end_time = this.picktime[1]
      }
      this.$request.get('/admin/statistics', { params: data }).then(res => {
        if (res.code == 200) {
          this.list.forEach(item => {
            item.number = Number(res.data[item.type])
          })
        } else {
          eltips(res.msg, 'error')
        }
      })
    },
    // 头部统计
    getTopCount() {
      this.$request.get('/admin/top/statistics').then(res => {
        if (res.code == 200) {
          this.topData = res.data
        } else {
          eltips(res.msg, 'error')
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
#index {
	min-height: calc(100vh - 70px);
}

.newsadd {
	margin-bottom: 10px;
	border-radius: 3px;
	display: flex;
	align-items: center;
  flex-wrap: wrap;
	.box {
		flex: 1;
		margin-right: 10px;
		background: #FFFFFF;
		padding: 10px;
		border-radius: 4px;
		&:last-child{
			margin-right: 0;
		}
		.icon {
			display: inline-block;
			vertical-align: top;
			width: 58px;
			height: 58px;
			border-radius: 50%;
		}
		.textinfo {
			display: inline-block;
			vertical-align: top;
			height: 56px;
			margin-left: 20px;
			.text {
				font-size: 14px;
				line-height: 28px;
			}
			.number {
				font-size: 20px;
				line-height: 28px;
			}
		}
	}
}

.echartsbox {
	margin-top: 10px;
	padding: 0 20px 20px;
	background: #ffffff;
	border-radius: 3px;
	overflow: hidden;
	.titlebox {
		overflow: hidden;
		.text {
			float: left;
			line-height: 40px;
			font-size: 16px;
			font-weight: bold;
			span {
				font-size: 12px;
				font-weight: normal;
				padding-left: 10px;
			}
		}
		.timebox {
			float: right;
			.changebox {
				// border: 1px solid #E7E7E7;
				display: inline-block;
				margin-right: 20px;
				div {
					display: inline-block;
					width: 40px;
					line-height: 30px;
					text-align: center;
					font-size: 14px;
					border: 1px solid #e7e7e7;
					cursor: pointer;
					&:first-child {
						border-right: none;
					}
				}
				.active {
					border: 1px solid #1e92ff !important;
					color: #1e92ff;
				}
			}
		}
	}
	.listbox{
			margin-top: 20px;
			height: 100px;
			width: 100%;
			border-bottom: none;
			border: 1px solid #e9edef;
			border-bottom: none;
			.list{
				display: inline-block;
				width: calc(100% / 5);
				height: 100px;
				padding: 20px;
				border-right: 1px solid #e9edef;
				border-bottom: 1px solid #e9edef;
				&:last-child{
					border-right: none;
				}
				&:hover{
					border: 1px solid #4A67FF;
				}
				.title{
					font-size: 14px;
          margin-bottom: 10px;
				}
				.number{
					font-size: 24px;
				}
			}
			.active{
				border: 1px solid #4A67FF !important;
				position: relative;
				.number{
					color: #4A67FF;
				}
				&::after{
					content: '';
					width: 0;
					height: 0;
					border-left: 15px solid transparent;
					border-top: 15px solid #4A67FF;
					border-right: 15px solid transparent;
					position: absolute;
					bottom: -15px;
					left: 50%;
					margin-left: -7px;
				}
				&::before{
					content: '';
					width: 0;
					height: 0;
					border-left: 13px solid transparent;
					border-top: 13px solid #ffffff;
					border-right: 13px solid transparent;
					position: absolute;
					bottom: -13px;
					left: 50%;
					margin-left: -5px;
					z-index: 1;
				}
			}
		}
	.echarts {
		border: 1px solid #e9edef;
		border-top: none;
		height: 500px;
	}
}

.titlebox {
		background: #ffffff;
		padding: 20px;
		margin: 10px 0;
		display: flex;
		justify-content: space-between;
		.label{
			margin-right: 10px;
		}
		.inputbox {
			display: inlin-block;
			width: 200px;
			line-height: 32px;
			height: 32px;
			font-size: 14px;
			margin-right: 30px;
		}
		.pickbox {
			width: 300px;
			margin-right: 30px;
			position: relative;
			top: 1px;
		}
		.selectbox{
			width: 100px;
			margin-right: 30px;
			position: relative;
			top: 1px;
		}
	}

	.tablebox {
		background: #ffffff;
		padding: 10px 20px;
		.infobox{
			display: flex;
			align-items: center;
			.info{
				text-align: left;
				margin-left: 20px;

				.addres{
					margin-top: 10px;
				}
			}
		}
		.moneybox{
			display: flex;
			.box{
				flex: 1;
				text-align: center;
				.title{
					margin-top: 2px;
					font-size: 16px;
				}
				.price{
					font-size: 20px;
					color: #1E92FF;
				}
			}
		}
	}

	.pages {
		text-align: center;
		background: #ffffff;
		padding: 20px 0;
		border-top: 1px solid #ededed;
	}
</style>
